export const Card = (props:any) => {
    const {item:product} = props;
    
    return (
        <div style={{border:"1px solid #ccc",marginBottom:'20px',borderRadius:'.2rem',padding:'.5rem'}}>
            <h3 style={{marginBottom:"15px",fontSize:'14px',color:'#99ccff'}}>{product.brand}</h3>
            <div style={{marginBottom:"2px",display:'flex',justifyContent:'space-between'}}>
                <h4>{product.title}</h4>
                <h4 style={{color:'#93cc76'}}>${product.price}</h4>
            </div>
            <p style={{fontSize:'13px',marginBottom:'5px'}}>{product.description}</p>
            <div style={{ display:'flex',gap:'10px' }}>
                {product.images.map((src:any,index:number)=>
                <img key={index} src={src} width="50" height="50"/>
                )}
            </div>
        </div>
    )
}